<template>
    <div class="footer">
        <span class="tongji">{{ count }} / {{ total }}</span>
        <span class="tabs">
            <a href="#" @click.prevent="flag = 0" :class="{ active: flag == 0 }">全部</a>
            <a href="#" @click.prevent="flag = 1" :class="{ active: flag == 1 }">未完成</a>
            <a href="#" @click.prevent="flag = 2" :class="{ active: flag == 2 }">已完成</a>
            <a href="#" @click.prevent="flag = 3" :class="{ active: flag == 3 }">回收站</a>

        </span>
        <span class="btn">
            <button @click="deldone">清除已完成</button>
            <button @click="remove">清空回收站</button>
        </span>
    </div>
</template>

<script setup>
let flag = defineModel()
const props = defineProps(['count', 'total', 'deldone', 'remove'])
</script>

<style scoped>
.footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid gainsboro;
    padding: 10px;
}

.tabs {
    display: flex;
    gap: 10px;
}

.tabs a {
    color: #76acfe;
    text-decoration: none;
}

.tabs a:hover {
    text-decoration: underline;
}

.tabs a.active {
    color: #a53237;
}

.btn button {
    border: none;
    border-radius: 5px;
    background-color: gainsboro;
    padding: 5px;
    margin-left: 10px;
    cursor: pointer;
}
</style>